<template>
  <ul class="mt-us-list" :class="className">
    <li class="mt-us-list-number border-bottom">
      <span class="">信息编号：{{data.sn}}</span>
      <span></span>
    </li>
    <li class="mt-us-list-detail border-bottom">
      <ul class="mt-us-list-detail-demands">
        <li class="mt-us-list-dd-namecount">
          <span class="orange-font mt-us-list-dd-name">{{data.kind_name}}</span>
          <div class="mt-us-list-dd-count">
            <span class="grey-font">求购：</span>
            <span class="orange-font">{{data.stock}}{{data.price_unit_name}}</span>
          </div>
        </li>
        <li class="mt-us-list-dd-priceunit">
          <span class="grey-font">价格：</span>
          <span class="orange-font mt-us-list-dd-price">{{price}}</span>
          <div class="mt-us-list-dd-unit">
            <span class="grey-font">规格：</span>
            <span class="">{{"1~1.5斤/条"}}</span>
          </div>
        </li>
        <li class="mt-us-list-dd-time">
          <span class="grey-font">发布时间：</span>
          <span>{{data.created_view}}</span>
        </li>
      </ul> 
    </li>
    <li class="mt-us-list-info border-bottom">
      <div v-if="type===0" class="mt-usi-sale">
        <div class="mt-usi-left">
          <div class="mt-usi-countdown">下架时间：</div>
          <span>{{data.valided_view}}</span>
        </div>
        <div class="mt-usi-right">
          <div class="mt-usi-countdown">最后刷新时间：</div>
          <span>{{data.updated_view}}</span>
        </div>
      </div>
      <div v-if="type===1" class="mt-usi-unshelve ellipsis">
        <span class="grey-font">下架原因：</span>
        <span>{{data.leave_type_view}}</span>
      </div>
      <div v-if="type===2" class="mt-usi-refuse" 
      :class="{'ellipsis': !spread}">
        <span class="grey-font">驳回原因：</span>
        <span>{{refuseDesc}}</span>
        <div class="mt-usi-refuse-arrow-down" 
        :class="{'mt-usi-refuse-arrow-up': spread}"
        @click="switchSpread"></div>
      </div>
    </li>
    <li class="mt-us-list-operate clearfix">
      <span>{{data.pv}}</span>
      <span class="grey-font">次查看</span>
      <div class="mt-uso-right">
        <x-button mini plain 
        @click.native="edit">修改</x-button>
        <x-button v-if="type===1||type===2" 
        mini plain 
        @click.native="ban">删除</x-button>
        <x-button v-if="type===0" 
        mini plain 
        @click.native="shelveOrUnshelve(2)">停止</x-button>
        <x-button v-if="type===0" 
        class="weui-btn-default-blue" 
        mini plain @click.native="refresh">刷新</x-button>
        <x-button v-if="type===1" 
        class="weui-btn-default-blue" 
        mini plain
        @click.native="shelveOrUnshelve(1)">重发</x-button>
      </div>
    </li>
  </ul>
</template>

<script>
import { XButton } from "vux"
import { parseMarketTime } from "@/modules/trade/posts"

const refresh = id =>
  axios.post("/api/trade/demand/refreshItem", qs.stringify({ id: id }))

const shelveOrUnshelve = id => status =>
  axios.post("/api/trade/demand/editItemStatus", qs.stringify({ id, status }))

const ban = id =>
  axios.post("/api/trade/demand/banItem", qs.stringify({ id: id }))

export default {
  data() {
    return {
      spread: false,
    }
  },
  props: {
    type: Number, //0销售中，1已下架，2被驳回
    data: Object,
    refuseInfo: Object,
    
  },
  computed: {
    className(v) {
      switch (this.type) {
        case 0:
          return "mt-us-list-sale"
        case 1:
          return "mt-us-list-unshelve"
        default:
          return "mt-us-list-refuse"
      }
    },
    unit() {
      if(this.data.size_unit_name === null || this.data.size_unit_name === '')  {
        return "规格不限"
      }else {
        return `${this.data.size_min}~${this.data.size_max}${this.data.size_unit_name}`
      }
    },
    price() {
        if (this.data.price_type === 1) {
          return `${this.data.price}元/${this.data.price_unit_name}`
        } else {
          return "价格面议"
        }
    },
    refuseDesc() {
      let len = this.refuseInfo.reject.length
      if (this.refuseInfo.reject_desc !== "") {
        len += 1
      }
      let refuseText = ""
      if (len === 1) {
        refuseText =
          this.refuseInfo.reject[0] !== undefined
            ? this.refuseInfo.reject[0]
            : this.refuseInfo.reject_desc
      } else {
        let i = 0
        refuseText = this.refuseInfo.reject.reduce((accumulator, value) => {
          i += 1
          return `${accumulator}${i}、${value} `
        }, "")
        if (this.refuseInfo.reject_desc !== "") {
          i += 1
          refuseText += `${i}、${this.refuseInfo.reject_desc} `
        }
      }
      return refuseText
    }
  },
  methods: {
    edit() {
      this.$router.push({
        name: "demandsEditBoard",
        params: { id: this.data.id }
      })
    },
    async refresh() {
      //刷新
      this.$emit("input", true)
      let res
      try {
        res = await refresh(this.data.id)
      } catch (e) {
        this.$emit("input", false)
      }

      this.$emit("input", false)
      if (res.data.resp_msg.msg_code === 200) {
        // this.$vux.toast.text("成功刷新", "bottom")
        this.$emit("refresh")
      } else {
        this.$vux.toast.text(res.data.resp_msg.msg_error.message, "bottom")
      }
    },
    async shelveOrUnshelve(type = 1) {
      //1上架 2下架
      this.$emit("input", true)
      let res
      try {
        if (type === 1) {
          res = await shelveOrUnshelve(this.data.id)(1)
        } else {
          res = await shelveOrUnshelve(this.data.id)(2)
        }
      } catch (e) {
        this.$emit("input", false)
      }

      this.$emit("input", false)
      if (res.data.resp_msg.msg_code === 200) {
        // let toastText = type === 1 ? '已上架' : '已下架'
        // this.$vux.toast.text(toastText, "bottom")
        this.$emit("refresh")
      } else {
        this.$vux.toast.text(res.data.resp_msg.msg_error.message, "bottom")
      }
    },
    async ban() {
      //删除
      this.$emit("input", true)
      let res
      try {
        res = await ban(this.data.id)
      } catch (e) {
        this.$emit("input", false)
      }

      this.$emit("input", false)
      if (res.data.resp_msg.msg_code === 200) {
        this.$emit("refresh")
      } else {
        this.$vux.toast.text(res.data.resp_msg.msg_error.message, "bottom")
      }
    },
    switchSpread() {
      this.spread = !this.spread
    }
  },
  components: { XButton }
}
</script>

<style lang="scss">
@import "../../styles/index.scss";

.mt-us-list {
  width: 100%;
  background: #fff;
  font-size: 16px;
  margin-bottom: 10px;

  .mt-us-list-number {
    padding-left: 10px;
    color: $grey-font-color;
    line-height: 40px;
  }

  .mt-us-list-detail {
    font-size: 0;
    height: 120px;

    .mt-us-list-detail-demands {
      padding: 15px 0;
      &>li {
        padding: 0 10px;
      }
      .mt-us-list-dd-namecount {
        font-size: 16px;
        margin-bottom: 12px;

        .mt-us-list-dd-name {
          font-size: 18px;
        }

        .mt-us-list-dd-count {
          display: inline-block;
          float: right;
        }
      }

      .mt-us-list-dd-priceunit {
        font-size: 16px;
        margin-bottom: 12px;

        .mt-us-list-dd-unit {
          display: inline-block;
          float: right;
        }
      }

      .mt-us-list-dd-time {
        font-size: 16px;
      }
    }

    .mt-usl-detail-left,
    .mt-usl-detail-right {
      display: inline-block;
      vertical-align: middle;
    }

    .mt-usl-detail-left {
      box-sizing: border-box;
      width: 40%;
      height: 100%;
      padding: 10px;

      .mt-usl-detail-image {
        width: 100%;
        height: 100%;
        background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);
      }
    }

    .mt-usl-detail-right {
      box-sizing: border-box;
      width: 60%;
      height: 100%;
      padding: 10px 0;
      padding-right: 10px;

      .mt-usl-price-kind {
        font-size: 16px;
        color: $orange-font-color;

        .mt-usl-salepre {
          position: relative;
          top: -1px;
          padding: 1px 3px;
          font-size: 11px;
          vertical-align: middle;
          border: 1px solid $orange-font-color;
        }

        .mt-usl-price {
          float: right;
        }
      }

      .mt-usl-unit {
        font-size: 16px;
        color: $primary-font-color;
      }

      .mt-usl-publish,
      .mt-usl-unshelve {
        font-size: 15px;

        .mt-usl-publishtime,
        .mt-usl-unshelvetime {
          color: $grey-font-color;
        }
      }
    }
  }

  .mt-us-list-info {
    font-size: 0;

    .mt-usi-sale {
      .mt-usi-left,
      .mt-usi-right {
        display: inline-block;
        vertical-align: middle;
        width: 50%;
        font-size: 14px;
        padding: 10px;
        box-sizing: border-box;

        .mt-usi-countdown {
          margin-bottom: 4px;
          color: $grey-font-color;
        }
      }
    }

    .mt-usi-unshelve {
      padding: 10px;
      font-size: 16px;
    }

    .mt-usi-refuse {
      position: relative;
      padding: 10px 40px 10px 10px;
      font-size: 16px;

      .mt-usi-refuse-arrow-down {
        position: absolute;
        border: 8px solid #ccc;
        border-color: #ccc transparent transparent;
        right: 18px;
        top: 16px;
        width: 0;
        height: 0;
        transition: all 0.4s ease;
      }

      .mt-usi-refuse-arrow-up {
        position: absolute;
        border: 8px solid #ccc;
        border-color: transparent transparent #ccc;
        right: 18px;
        top: 8px;
        width: 0;
        height: 0;
        transition: all 0.4s ease;
      }
    }
  }

  .mt-us-list-operate {
    padding: 10px;
    line-height: 31px;
    font-size: 14px;

    .mt-uso-right {
      float: right;
      .weui-btn {
        margin-top: 0;
        width: 70px;
        padding: 0 10px !important;
        border-radius: 29px;
      }
    }
  }

  //不同type的样式差异
  &.mt-us-list-sale {
    .mt-usl-price-kind {
      margin-bottom: 20px;
    }
    .mt-usl-unit {
      margin-bottom: 20px;
    }
    .mt-usl-publish {
      font-size: 16px !important;
      margin-bottom: 6px;
    }
  }

  &.mt-us-list-unshelve,
  &.mt-us-list-refuse {
    .mt-usl-price-kind {
      margin-bottom: 10px;
    }
    .mt-usl-unit {
      margin-bottom: 10px;
    }
    .mt-usl-publish {
      margin-bottom: 6px;
    }
  }
}
</style>
